<template>
    <div>

      
        <h1>{{ str }}</h1>
        <!-- <input type="text" v-model="str" > -->
        <!-- <input type="text" v-bind:value="str" v-on:input="str = $event.target.value"> -->

        <span>这是父组件：</span>
        <input type="text" v-model="str">

        <br>
        <hr>

        <!-- <OneModel  v-bind:value="str" v-on:input="str = $event.target.value"/> -->
        <OneModel  v-model="str"/>

        <hr>
        <hr>
        <TwoModel v-model="str"/>
    </div>
</template>

<script>
import OneModel from './OneModel.vue';
import TwoModel from './TwoModel.vue';


    export default {
        name:"Model",
        data(){
            return {
                str:"123456789"
            }
        },
        components:{
            OneModel,
            TwoModel
        },
        // methods:{
        //     getValue(e){
        //         console.log(e.target.value);
        //         this.str = e.target.value;
        //     }
        // }
    }
</script>

<style scoped>

</style>